import {defineStore} from 'pinia'
import {ref } from 'vue'
import type{MenuItem} from '@/type/user'
export const useTabsStore = defineStore('tabs',()=>{
    // 1.tabs列表
    const tabList = ref<MenuItem[]>([])
    // 2.添加tabs列表
    const addTab = (name:string,icon:string,url:string)=>{
        console.log(name,icon,url)
        if(!tabList.value.some((tab)=>tab.url===url)){
            tabList.value.push({name,icon,url})
        }
    }
    // 3.默认高亮
    const ActiveTab = ref<{name:string,url:string}|any>({name:'',url:''})
    // 4.设置高亮
    const setActiveTab = (name:string,url:string)=>{
        ActiveTab.value = {name,url}
    }

    // 5.删除列表
    const removeTabs = (name:string)=>{
        if(ActiveTab.value.name===name){
            const currentTabIndex = tabList.value.findIndex(tab=>tab.name===name)
            if(currentTabIndex>0){
                ActiveTab.value = tabList.value[currentTabIndex-1]
            }else{
                if(currentTabIndex === 0 && tabList.value.length>1){
                    ActiveTab.value = tabList.value[currentTabIndex+1]
                }else{
                    return
                }
            }
        }
        tabList.value = tabList.value.filter(item=>item.name !== name)
    }

    return {tabList,ActiveTab,addTab,setActiveTab,removeTabs}
})